<template>
  <div>
    <FuncSearch @add-func="drawer = true; title='添加功能'" @search="searchData"></FuncSearch>

    <Table border :columns="columns" :data="data">
      <template #name="{ row }">
        <div style="cursor: pointer">
          <strong>{{row.name}}</strong>
        </div>
      </template>

      <template #btnCount="{row}">
          <Badge :count="row.btnCount"  type="info"/>
      </template>

      <template #action="{ row, index }">
        <Button type="success" icon="md-add-circle" size="small"
                  v-auth:func:view:bind-btn
                  :disabled="!row.status"
                  style="margin-right: 5px" @click="showBtn(row)">
          绑定按钮
        </Button>
        <Button type="primary" icon="ios-create-outline" size="small"
                v-auth:func:view:modify
                style="margin-right: 5px" @click="modifyFunc(row)">
          修改
        </Button>
        <Button type="error" icon="ios-remove-circle-outline" size="small"
                v-auth:func:view:del @click="remove(row.id)">移除</Button>
      </template>

      <template #status="{ row, index }">
        <DotTag type="primary" v-if="row.status">正常</DotTag>
        <DotTag type="error" v-else>失效</DotTag>
      </template>

      <template #menuName="{row}">{{ row.menu.name}}</template>

      <template #footer>
        <div style="min-width: 300px; max-width: 380px;">
          <van-pagination v-model="page" :total-items="total"
                          :items-per-page="pageSize"
                          :show-page-size="6"
                          force-ellipses />
        </div>
      </template>
    </Table>

    <Modal v-model="btnWin" v-if="btnWin" title="绑定按钮" :width="1000" :before-close="closeBtnWin">
        <BtnForm :funcRow="funcRow" ref="btnForm"></BtnForm>
        <template #footer>
          <Button type="default" @click="closeBtnWin">关闭</Button>
          <Button type="primary" @click="saveBtn">确定</Button>
        </template>
    </Modal>

    <Drawer
        :title="title"  v-if="drawer"
        v-model="drawer"
        width="720"
        :mask-closable="false"
        @on-close="closeDrawer"
        :styles="{height: 'calc(100% - 55px)',overflow: 'auto',paddingBottom: '53px',position: 'static'}">
      <FuncForm @close-win="closeDrawer" :funcRow="funcRow"></FuncForm>
    </Drawer>

  </div>
</template>
<script>
import VanPagination from "../components/VanPagination.vue";
import FuncForm from '../components/FuncForm.vue'
import BtnForm from '../components/BtnForm.vue'
import BtnList from "../components/BtnList.vue";
import DotTag from '../components/DotTag.vue'
import FuncSearch from "../components/FuncSearch.vue";

export default {
  data() {
    return {
      drawer: false,
      btnWin: false,
      funcRow: null ,
      page: 1,
      pageSize: 10,
      total: 0,
      columns: [
        {
          type: 'expand',
          width: 50,
          render: (h, { row }) => {
            return h(BtnList, {funcId: row.id})
          }
        },
        {
          type: 'index',
          width: 60,
          align: 'center'
        },
        {
          title: '功能名',
          slot: 'name'
        },
        {
          title: '路由地址',
          key: 'linkUrl'
        },
        {
          title: '所属菜单',
          slot: 'menuName'
        },
        {
          title: '按钮数',
          slot: 'btnCount',
          width: 80,
        },
        {
          title: '顺序',
          key: 'sorted'
        },
        {
          title: '权限标记',
          key: 'remark'
        },
        {
          title: '状态',
          key: 'status',
          slot: 'status'
        },
        {
          title: '操作',
          slot: 'action',
          width: 280,
          align: 'center'
        }
      ],
      data: [],
      params: null ,
      title: "" ,
    }
  },
  created(){
     this.queryFuncList(this.page);
  },
  methods: {
    saveBtn() {
         let data = this.$refs.btnForm.formData ;
         if (data.btnName == null || data.btnName === "") {
           this.$Message.error({background: true, content:'按钮名为空'});
           return false ;
         }
         if (data.suffix == null || data.suffix === "") {
           this.$Message.error({background: true, content:'按钮权限标识为空'});
           return false;
         }
         let param = {name: data.btnName, remark: data.remark + ":" + data.suffix, status: data.status, funcId: data.id};

         // 获取所有的数据、并 调用接口、完成数据的添加
         this.$api.saveBtn(param).then(({data:ret})=> {
             if (ret.status === "10000") {
               this.$Message.success({background: true, content:'按钮添加成功'});
               this.$refs.btnForm.clearFormData();
               // 关闭窗口
               this.closeBtnWin() ;
               this.searchData();
             }else{
               this.$Message.error({background: true, content: ret.message});
             }
         })
    },
    closeBtnWin() {
       this.btnWin = false ;
       this.funcRow = null ;
    },
    searchData(params) {
      this.$api.queryFuncList(this.page, this.pageSize, params).then(({data:ret})=> {
        this.data = ret.data.list ;
        this.total = ret.data.total ;
      }) ;
    },
    queryFuncList(page){
        this.$api.queryFuncList(page, this.pageSize).then(({data:ret})=> {
           this.data = ret.data.list ;
           this.total = ret.data.total ;
        }) ;
    },
    modifyFunc(row) {
       let menu = row.menu; // 获取菜单
       // 获取 要修改的记录
       this.funcRow = {...row, menuId: menu.id} ;
       this.drawer = true ;
       this.title = '修改功能' ;
    },

    closeDrawer(flag) {
      if (flag) this.searchData(this.params) ; // 刷新数据
      this.drawer = false ;
      this.funcRow = null ;
      this.title = '';
    },
    showBtn(row) {
      this.btnWin = true;
      this.funcRow = {...row} ;
    },
    remove(funcId) {
      this.$Modal.confirm({
        title: '提示',
        content: `您确定要删除该功能吗?`,
        onOk: () => {
          // 负责 调用接口、完成 菜单状态的修改
          this.$api.removeFunc(funcId).then(({data: ret}) => {
            if (ret.status === "10000") {
              this.$Message.success({background: true, content: "数据删除成功"});
              // 修改数据的状态
              this.searchData(this.params);
            } else {
              this.$Message.error({background: true, content: ret.message});
            }
          })
        }
      })
    },
  },
  watch: {
     page: function(newPage) {
        this.queryFuncList(newPage) ;
     }
  },
  components: {
    FuncSearch,
    FuncForm,
    BtnForm,
    DotTag,
    VanPagination
  }
}
</script>

<style>
.ivu-row {
  margin: 5px 0;
}
</style>